<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NativeEventBindComponent</title>
  <!-- 原生事件绑定DOM -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    parent:
    <base-input v-on:focus.native="onFocus"></base-input>
  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      msg: 'NativeEventBindComponent'
    },
    components: {
      'base-input': {
        inheritAttrs: false,
        props: ['label', 'value'],
        computed: {
          'inputListeners': function () {
            let vvm = this
            return Object.assign({},
              this.$listeners,
              {
                // 这里确保组件配合 `v-model` 的工作
                input: function (event) {
                  vm.$emit('input', event.target.value)
                  console.log(event.target.value)
                }
              }
            )
          }
        },
        template:
        `<label>
          {{ label }}
          <input
            v-bind="$attrs"
            v-bind:value="value"
            v-on="inputListeners"
          >
        </label>`
      }
    }
  })
</script>
</html>